<template>
  <div class="home">
    <div class="home-left">
      <div class="search">
<!--        <el-input-->
<!--          placeholder="搜索活动"-->
<!--          prefix-icon="el-icon-search"-->
<!--          v-model="searchValue">-->
<!--        </el-input>-->
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="searchValue"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
          prefix-icon="el-icon-search">
          <template slot-scope="{ item }">
            <span>{{ item.title }} -- {{ item.createuser }}</span>
          </template>
        </el-autocomplete>
      </div>
      <div class="classify">
        <el-select v-model="selectValue" clearable placeholder="分类筛选" @change="changeSelected">
          <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <div class="timeRange">
        <div class="block">
          <el-date-picker
            v-model="timeSelect"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="home-right">
      <div class="activities">
        <el-card style="padding: 0;overflow: hidden;white-space: nowrap;" v-for="(act, index) in showActivity" :key="index" class="card">
          <div slot="header" class="clearfix" style="display: flex;justify-content: space-between;line-height: 30px">
            <span>{{act.title}}</span>
            <span><el-tag type="success">剩{{act.total_number}}人</el-tag></span>
          </div>
          <div>
            <el-image :src="imgUrl(act.type)" fit="fill"></el-image>
          </div>
        </el-card>
      </div>
      <div class="paginator">
        <el-pagination
          :page-count="pageCount"
          :pager-count="11"
          :current-page="currentPage"
          layout="prev, pager, next"
          :hide-on-single-page="true"
          @prev-click="changePage(currentPage-1)"
          @next-click="changePage(currentPage+1)"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      message: '您好',
      searchValue: '',
      options: [{
        label: '分类筛选',
        options: [{
          value: 'all',
          label: '所有'
        }, {
          value: 'conference',
          label: '会议'
        }, {
          value: 'sport',
          label: '体育'
        }, {
          value: 'party',
          label: '聚会'
        }, {
          value: 'travel',
          label: '旅游'
        }, {
          value: 'classroom',
          label: '班级'
        }, {
          value: 'banquet',
          label: '宴席'
        }]
      }],
      selectValue: '',
      timeSelect: '',
      showActivity: [],
      pageCount: 1,
      currentPage: 1,
      currentType: 'all'
    }
  },
  created () {
    this.getVaildActivity()
  },
  methods: {
    getVaildActivity () {
      this.axios.get(
        'get_vaild_activity/?pagenum=' + this.currentPage
      ).then(res => {
        if (res.result) {
          this.showActivity = res.data.acts
          this.pageCount = res.data.pageCount
          console.log(res.data)
        }
      })
    },
    imgUrl (type) {
      return 'http://127.0.0.1:8000/static/' + type + '.png'
    },
    getActs () {
      this.axios.get(
        'get_vaild_activity/?pagenum=' + this.currentPage + '&currentType=' + this.currentType
      ).then(res => {
        if (res.result) {
          this.showActivity = res.data.acts
          this.pageCount = res.data.pageCount
          console.log(res.data)
        }
      })
    },
    changePage (page) {
      console.log(page)
      this.currentPage = page
      this.getActs()
    },
    changeSelected (value) {
      this.currentType = value
      this.getActs()
      console.log(value)
    },
    querySearch (queryString, cb) {
      this.axios.get(
        'get_vaild_activity/?isGetAll=True'
      ).then(res => {
        if (res.result) {
          const searchActivity = res.data
          var results = queryString ? searchActivity.filter(this.createFilter(queryString)) : searchActivity
          // 调用 callback 返回建议列表的数据
          cb(results)
        }
      })
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped>
.home{
  height: 100%;
  display: flex;
}
.home-left{
  box-sizing: border-box;
  height: 100%;
  width: 25%;
  background-color: #eeeeee;
  padding: 1vh 1vw;
}
.search, .classify, .timeRange{
  margin: 20px 0;
}
.el-select, .el-autocomplete, .el-input{
  width: 100%;
}

.home-right{
  box-sizing: border-box;
  height: 100%;
  width: 75%;
  background-color: #ddffdd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.activities{
  padding: 20px 20px 5px 20px;
  background-color: #feeeff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 100%;
}
.card{
  width: 24%;
  height: 37vh;
  margin: .5% calc(.5% - 1px);
}
.paginator{
  padding: 1vh;
  background-color: #eefffe;
}
.el-pagination{
  text-align: center;
}
</style>
